<template>
  <div>
<h1 align="center">显示页面</h1>
借款项目名称：<input type="text" v-model="state.Name">
<input type="button" value="查询" @click="show">
利息：<select v-model="state.Iid">
  <option value="0">请选择</option>
  <option :value="item.Iid" v-for="item in lists">{{item.LiXi*100}}%</option>
</select>
<table class="table table-bordered">
  <tr>
    <td>借款项目编号</td>
    <td>借款项目名称</td>
    <td>借款总金额</td>
    <td>月还款金额(本+利)</td>
    <td>利息</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in list">
    <td>{{item.id}}</td>
    <td>{{item.Name}}</td>
    <td>{{item.Money}}</td>
    <td>{{((item.Money/12)+(item.Money*item.LiXi/12)).toFixed(2)}}</td>
    <td>{{item.LiXi*100}}%</td>
    <td>
      <input type="button" value="修改" @click="update(item.id)">
      <input type="button" value="删除" @click="del(item.id)">
    </td>
  </tr>
</table>
共<span>{{ count }}</span>条
共<span>{{ pcount }}</span>页
每页<span>{{ state.pageSize }}</span>条
当前第<span>{{ state.pageIndex }}</span>/<span>{{ pcount }}</span>页&nbsp;
<input type="button" value="首页" @click="page(1)">
<input type="button" value="上一页" @click="page(state.pageIndex-1)">
<input type="button" value="下一页" @click="page(state.pageIndex+1)">
<input type="button" value="首页" @click="page(pcount)">
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue'
import axios from 'axios'
import {useRoute,useRouter} from 'vue-router'
const route=useRoute()
const router=useRouter()

let data:any=reactive({
  list:[],
  lists:[],
  state:{
    Name:'',
    Iid:0,
    pageIndex:1,
    pageSize:2
  },
  count:0,
  pcount:0
})

let {list,lists,state,count,pcount}=toRefs(data)

onMounted(()=>{
  show();
  getlist();
})

const show=()=>{
  axios({
    url:'/api/Default/GetShow',
    method:'get',
    params:state.value
  })
  .then(res=>{
    console.log(res);
    list.value=res.data.data.plist;
    count.value=res.data.data.count;
    pcount.value=res.data.data.pcount;
  })
  .catch(err=>{
    console.log(err)
  })
}

const getlist=()=>{
  axios({
    url:'/api/Default/GetInterests',
    method:'get',
  })
  .then(res=>{
    console.log(res);
    lists.value=res.data.data
  })
  .catch(err=>{
    console.log(err);
  })
}

const page=(y:any)=>{
   if(y >= 1 && y <= pcount.value){
    state.value.pageIndex = y
   }
   show()
}

const update=(id:any)=>{
  router.push({
    path:'/update',
    query:{
      id:id
    }
  })
}

const del=(id:any)=>{
const f=confirm("确认删除吗？");
if(f){
  axios({
    url:'/api/Default/GetIsDel/{id}',
    method:'get',
    params:{id:id}
  })
  .then(res=>{
    if(res.data.data>0){
      alert('删除成功');
      show();
    }
    else{
      alert('删除失败');
    }
  })
  .catch(err=>{
    console.log(err)
  })
}
}
</script>

<style scoped>

</style>